<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>date test</h1>
<p th:text="${date}"></p>
<button onclick="decreaseDay()">&lt;</button>
<button onclick="increaseDay()">&gt;</button>
<!--<p>Выберите дату: <input type="date" id="dateField">-->

<div class="main">
    <img th:src="@{images/logo/prmo_logo_small.png}" alt="logo_sm">
    <h3>“РЖД МЕДИЦИНА” г. КАЛУГА ОТЧЕТ О ПРЕДРЕЙСОВЫХ ОСМОТРАХ</h3>


    <form action="#" th:action="@{/user/workspace}" th:object="${form}" method="post">
        <div class="datepicker">
            <button type="button" onclick="decreaseDay()">&lt;</button>
        </div>
        <div class="datepicker"><input type="date" id="dateField" th:field="${form.date}"></div>
        <div class="datepicker">
            <button type="button" id="incBtn" onclick="increaseDay()">&gt;</button>
        </div>
        <!--        <p>Выберите дату: <input type="date" id="dateField" th:field="${form.date}">-->
        <div th:if="${ not#lists.isEmpty(form.operationRecords)}">
            <table id="customers">
                <thead>
                <tr>
                    <th>Процедуры</th>
                    <th>Количество</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="record, itemStat : ${form.operationRecords}">
                    <td><input th:field="*{operationRecords[__${itemStat.index}__].operationName}" th:readonly="true">
                    </td>
                    <td><input type="text" th:field="*{operationRecords[__${itemStat.index}__].count}"></td>
                </tr>
                </tbody>
            </table>
            <div class="wrap">
                <button type="submit">
                    Отправить
                </button>
            </div>
        </div>
        <div>
            <h3>Данные отсутствуют</h3>
        </div>
    </form>
</div>

<script>
    document.getElementById("dateField").valueAsDate = new Date(Date.now());
    document.getElementById("dateField").max = new Date(new Date().getTime() - new Date().getTimezoneOffset() * 60000).toISOString().split("T")[0];
</script>
<script>
    function decreaseDay() {
        let tmp = document.getElementById("dateField").value
        let newDate = Date.parse(tmp) - 86400000
        document.getElementById("dateField").valueAsDate = new Date(newDate)
    }
</script>
<script>
    function increaseDay() {
        let tmp = document.getElementById("dateField").value
        let newDate = Date.parse(tmp)
        if (new Date(Date.now()) > newDate) {
            newDate += 86400000
            document.getElementById("dateField").valueAsDate = new Date(newDate)
        }
    }
</script>
</body>
</html>